import { NotificationOutlined, FullscreenOutlined, SunOutlined, SettingOutlined, FullscreenExitOutlined, DesktopOutlined, MoonOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import styles from "./index.module.scss";
import { Badge, Dropdown, MenuProps, Popover, Tooltip } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { toggleThemes } from '@/store/actions/settingActions';
import useStores from '@/hooks/useStores';
import MessagePop from '../messagePop';

const items: MenuProps['items'] = [
    {
        label: '日间',
        key: 'light',
        icon: <SunOutlined style={{ fontSize: "16px" }} />,
    },
    {
        label: '夜间',
        key: 'dark',
        icon: <MoonOutlined style={{ fontSize: "16px" }} />,
    },
    {
        label: '跟随系统',
        key: 'system',
        icon: <DesktopOutlined style={{ fontSize: "16px" }} />,
    }
]

interface IProps {
    onSetting: (falg: boolean) => void;
}

const HeaderTool: React.FC<IProps> = ({ onSetting }) => {
    const dispatch = useDispatch();
    const [full, setFull] = useState(false); // 是否全屏
    const [txtConfig, setTxtConfig] = useState({
        title: '切换全屏',
        arrow: true
    });
    const message = useSelector((state: any) => state.userinfo.messageNum);
    const store = useStores();
    const { themes } = store;

    document.body.setAttribute("data-theme", themes.type);

    useEffect(() => {
        // 监听系统主题颜色的变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            const newColorScheme = event.matches ? 'dark' : 'light';
            const themes = {
                type: newColorScheme,
                icon: "system"
            }
            dispatch(toggleThemes(themes))
            localStorage.setItem("setting", JSON.stringify({
                ...store,
                themes,
            }))
        });
    }, [])

    // 全屏点击事件
    const fullScreen = () => {
        setFull(!full);
        const status = !full;
        status ? document.documentElement.requestFullscreen() : document.exitFullscreen();
    }

    // 更改主题颜色事件
    const changeTheme = (key: string) => {
        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        const type = isDarkMode ? 'dark' : 'light';
        const themes = {
            type: key == 'system' ? type : key,
            icon: key
        }
        document.body.setAttribute("data-theme", themes.type);
        dispatch(toggleThemes(themes));

        localStorage.setItem("setting", JSON.stringify({
            ...store,
            themes,
        }))
    }

    return (
        // <Space direction='horizontal' size={26}>

        // </Space>

        <div className={styles.content}>
            {/* 通知 */}
            <Popover placement="bottom" content={<MessagePop />} trigger={['click']}>
                <Badge count={message} size="small" offset={[0, 0]}><NotificationOutlined className={styles.icons} /></Badge>
            </Popover>

            {/* 全屏 */}
            <Tooltip placement="bottom" title={txtConfig.title} arrow={txtConfig.arrow}>
                {
                    full ? (
                        <FullscreenExitOutlined className={styles.icons} onClick={fullScreen} />
                    ) : (
                        <FullscreenOutlined className={styles.icons} onClick={fullScreen} />
                    )
                }
            </Tooltip>
            {/* 主题 */}
            <Dropdown
                placement={"bottom"}
                menu={{ items, selectable: true, defaultSelectedKeys: [`${themes.icon}`], onClick: (e: any) => { changeTheme(e.key) } }}
                trigger={['click']}
                overlayClassName={styles.dropdownPosition}
            >
                {themes.icon == 'system' ? <DesktopOutlined className={styles.icons} /> : themes.icon == 'light' ? <SunOutlined className={styles.icons} /> : <MoonOutlined className={styles.icons} />}
            </Dropdown>
            {/* 设置 */}
            <SettingOutlined className={styles.icons} onClick={() => { onSetting(true) }} />
        </div>
    )
}

export default HeaderTool;